<template>
  <div class="common-page main">
    <ul>
      <li class="case-item" @click="routerGo('grid-view')">
        <div class="left-icon">
          <img :src="require('@/assets/img/jizhi.png')" alt="">
        </div>
        <div class="right-desc">
          <h3 class="title">九宫格案例</h3>
          <p class="desc">这是一个九宫格的排版案例，包含样式如何实现，其实这个简介不用写那么多，只是为了展示是否可以多行超出省略，然而并未超出，所以就继续添加内容了</p>
        </div>
      </li>
      <li class="case-item" @click="routerGo('leftbar-view')">
        <div class="left-icon">
          <img :src="require('@/assets/img/jizhi.png')" alt="">
        </div>
        <div class="right-desc">
          <h3 class="title">左bar的多种实现方式</h3>
          <p class="desc">使用了7种方式仅用一个div标签实现有左边bar样式的区块，还等什么，快来看啊！</p>
        </div>
      </li>
      <li class="case-item" @click="routerGo('colorborder-view')">
        <div class="left-icon">
          <img :src="require('@/assets/img/jizhi.png')" alt="">
        </div>
        <div class="right-desc">
          <h3 class="title">background-origin和clip</h3>
          <p class="desc">讲述了盒子模型 Box Model 与 背景 background 相关样式属性的关系，如background-origin 和 backgroun-clip</p>
        </div>
      </li>
      <li class="case-item" @click="routerGo('stacklevel-view')">
        <div class="left-icon">
          <img :src="require('@/assets/img/jizhi.png')" alt="">
        </div>
        <div class="right-desc">
          <h3 class="title">dom的层叠顺序</h3>
          <p class="desc">了解了一些 ‘层叠水平’ 和 ‘堆叠上下文’ 的概念</p>
        </div>
      </li>
      <li class="case-item" @click="routerGo('reflect-view')">
        <div class="left-icon">
          <img :src="require('@/assets/img/jizhi.png')" alt="">
        </div>
        <div class="right-desc">
          <h3 class="title">倒影实现</h3>
          <p class="desc">使用 inherit，做背景继承</p>
        </div>
      </li>
      <li class="case-item" @click="routerGo('textcenter-view')">
        <div class="left-icon">
          <img :src="require('@/assets/img/jizhi.png')" alt="">
        </div>
        <div class="right-desc">
          <h3 class="title">文字单行居中，两行靠右，多行省略</h3>
          <p class="desc">使用 inherit，做背景继承</p>
        </div>
      </li>
      <!-- <li class="case-item" @click="routerGo" data-link="csstabview">
        <div class="left-icon">
          <img :src="require('@/assets/img/jizhi.png')" alt="">
        </div>
        <div class="right-desc">
          <h3 class="title">纯css tab 控件</h3>
          <p class="desc"></p>
        </div>
      </li>
      <li class="case-item" @click="routerGo" data-link="samehighview">
        <div class="left-icon">
          <img :src="require('@/assets/img/jizhi.png')" alt="">
        </div>
        <div class="right-desc">
          <h3 class="title">双列等高</h3>
          <p class="desc">双(多)列登高是 页面 常用布局方法，本例中使用 多种比较通用的方法实现 双列等高</p>
        </div>
      </li>
      <li class="case-item" @click="routerGo" data-link="slantlineview">
        <div class="left-icon">
          <img :src="require('@/assets/img/jizhi.png')" alt="">
        </div>
        <div class="right-desc">
          <h3 class="title">实现正方形中斜线切歌</h3>
          <p class="desc"></p>
        </div>
      </li>
      <li class="case-item" @click="routerGo" data-link="stickybottomview">
        <div class="left-icon">
          <img :src="require('@/assets/img/jizhi.png')" alt="">
        </div>
        <div class="right-desc">
          <h3 class="title">粘性底部布局</h3>
          <p class="desc"></p>
        </div>
      </li>
      <li class="case-item" @click="routerGo" data-link="linearbgview">
        <div class="left-icon">
          <img :src="require('@/assets/img/jizhi.png')" alt="">
        </div>
        <div class="right-desc">
          <h3 class="title">渐变背景动画</h3>
          <p class="desc"></p>
        </div>
      </li>
      <li class="case-item" @click="routerGo" data-link="stickyview">
        <div class="left-icon">
          <img :src="require('@/assets/img/jizhi.png')" alt="">
        </div>
        <div class="right-desc">
          <h3 class="title">粘滞融合效果</h3>
          <p class="desc"></p>
        </div>
      </li> -->
    </ul>
  </div>
</template>

<script>
export default {
  name: 'Index',
  props: {

  },
  data () {
    return {


    }
  },
  computed: {
 
  },
  created() {

  },
  methods: {
    routerGo(link) {
      // let target = event.currentTarget.getAttribute('data-link');
      this.$router.push({
        path: `/${link}`
      })
    }
  }
  // mounted() {

  // }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="stylus">
//@import "~common/style/variable"
@import "~@/styles/mixins"
.main
  // font-size 0.28rem
  padding 10px
  .case-item
    display flex
    align-items center
    flex-flow row nowrap
    padding 5px
    margin-bottom 5px
    thin-border-bottom(#cccccc)
    .left-icon
      flex 0 0 80px
      width 80px
      height 80px
      margin-right 10px
      img
        display block
        width 100%
        height 100%
    .right-desc
      display block
      flex 1 1 auto
      overflow hidden
 
      h3.title
        display block
        width 100%
        line-height 2
        font-weight bold
        no-wrap()
      p.desc
        height 60px
        line-height 1.4
        multiline-hide(3)
</style> 




